<script setup>
import {ref} from "vue";

// 接收父组件传递的数据
let parent = defineProps({
  'items': {type: Array, required: true}
});

// 存放父组件传递的全部文本框的值 + 全部单选按钮的值 + 全部下拉菜单的值
let iptValues = ref({});
let rdoValues = ref({});
let optValues = ref({});

// 分类存储 iptValues, rdoValues 和 optValues 的值
for (let item of parent['items']) {

  // 使用当前 item 的字符串形式作为 key 值，以保证唯一性
  let key = JSON.stringify(item);

  // 将全部单行文本的值存入 iptValues 对象
  if (item['iptValue'] != null) {
    iptValues.value[key] = item['iptValue'];
  }

  // 将全部单选按钮的值存入 rdoValues 对象
  if (item['rdoValue'] != null) {
    rdoValues.value[key] = item['rdoValue'];
  }

  // 将全部下拉菜单的值存入 optValues 对象
  if (item['optValue'] != null) {
    optValues.value[key] = item['optValue'];
  }
}
</script>

<template>
  <el-row class="my-head">
    <el-col v-for="item in items" :key="item"
            :span="item['span'] || 1"
            :offset="item['offset'] || 0">

      <!--ipt文本框-->
      <el-input class="ipt" v-if="item['type'] === 'ipt'" size="small" clearable
                v-model="iptValues[JSON.stringify(item)]"
                :placeholder="item['placeholder']"
                @clear="item['fn'](iptValues[JSON.stringify(item)])">
        <template #append>
          <el-button :icon="item['icon'] || 'Search'" size="small"
                     @click="item['fn'](iptValues[JSON.stringify(item)])"/>
        </template>
      </el-input>

      <!--opt下拉菜单-->
      <el-select class="opt" v-else-if="item['type'] === 'opt'" size="small" clearable
                 v-model="optValues[JSON.stringify(item)]"
                 :filterable="item['filterable'] || true"
                 :placeholder="item['placeholder']"
                 @change="item['fn'](optValues[JSON.stringify(item)])">
        <el-option v-for="optItem in item['optItems']" :key="optItem"
                   :label="optItem['label']"
                   :value="optItem['value']"/>
      </el-select>

      <!--rdo单选按钮-->
      <el-radio-group class="rdo" v-else-if="item['type'] === 'rdo'" size="small"
                      v-model="rdoValues[JSON.stringify(item)]"
                      @change="item['fn'](rdoValues[JSON.stringify(item)])">
        <el-radio-button v-for="rdoItem in item['rdoItems']" :key="rdoItem"
                         :label="rdoItem['value']">
          <span>{{ rdoItem['label'] }}</span>
        </el-radio-button>
      </el-radio-group>

      <!--insertBtn单增记录按钮-->
      <el-button class="btn" v-else-if="item['type'] === 'insertBtn'" plain size="small"
                 title="单增一条记录" icon="CirclePlusFilled" type="primary" @click="item['fn']"/>

      <!--deleteBtn批量删除按钮-->
      <el-button class="btn" v-else-if="item['type'] === 'deleteBtn'" plain size="small"
                 title="批量删除记录" icon="DeleteFilled" type="danger" @click="item['fn']"/>

      <!--excelBtn打印报表按钮-->
      <el-button class="btn" v-else-if="item['type'] === 'excelBtn'" plain size="small"
                 title="打印数据报表" icon="Grid" type="warning" @click="item['fn']"/>

      <!--普通按钮-->
      <el-button class="btn" v-else plain size="small"
                 :title="item['btnTitle']"
                 :icon="item['btnIcon']"
                 :type="item['btnType']"
                 @click="item['fn']"/>

    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
:deep(.el-input__inner) {
  padding-left: 5px; // 左内边距
  box-sizing: border-box; // 忽略内边距影响
}

:deep(.el-select__selection) {
  padding-left: 5px; // 左内边距
  box-sizing: border-box; // 忽略内边距影响
}

.my-head {
  display: flex; // flex布局
  align-items: center; // 垂直居中
  margin: 30px auto 10px; // 外边距

  .ipt {
    width: 95%; // 宽度
  }

  .rdo, .btn {
    float: right; // 右浮动
  }

}
</style>